<script setup>
import * as api from "@/api/v-msg-service/sms-manage/sms-signature";
import { listSmsAccount } from "@/api/v-msg-service/sms-manage/sms-account";

const emits = defineEmits([
  'query',
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})

const accountList = ref([])

const formData = ref({
  id: '',
  signName: '',//签名名称
  accountId: '',//短信渠道
})

const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  signName: [{ required: true, message: "签名名称不能为空", trigger: "blur" }],
  accountId: [{ required: true, message: "短信渠道不能为空", trigger: "blur" }],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const title = computed(
    () => {
      return props.rowData && props.rowData.id ? '编辑签名' : '新增签名'
    }
)
watch(
    props.rowData,
    (val) =>{
      if (val && val.id) Object.assign(formData.value,val)
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {
  init_Cache()
}
const init_Cache = () => {
  listSmsAccount().then(({data}) => {
    accountList.value = data
  })
}
const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.save(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({message: '保存成功', type: 'success',})
        emits('query')
      }
    }
  })
}
</script>

<template>
  <v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <div class="tips">*短信签名需要在您的短信渠道商存在下，才可以正常使用</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="签名名称：" prop="signName">
            <el-input v-model="formData.signName" placeholder="请输入签名名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="短信渠道：" prop="accountId">
            <el-select
                v-model="formData.accountId"
                placeholder="请选择短信渠道">
              <el-option
                  v-for="item in accountList"
                  :key="item.id"
                  :label="item.channelNameCodeTxt"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
.tips {
  font-size: 13px;
  margin-left: 20px;
  margin-bottom: 10px;
  color: #999999;
}
</style>